<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MonkeyCMS</title>
    <link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
    <link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
    <script type="text/javascript" src="statics/js/jquery.min.js"></script>
    <script type="text/javascript" src="statics/js/prettify.js"></script>
    <script type="text/javascript" src="statics/js/lhgdialog.min.js?self=true&skin=monkey"></script>
    <script type="text/javascript">
        (function (config) {
            config['extendDrag'] = false; // 注意，此配置参数只能在这里使用全局配置，在调用窗口的传参数使用无效
            config['lock'] = true;
            config['fixed'] = true;
            config['min'] = false;
            config['max'] = false;
            config['okVal'] = 'Ok';
            config['cancelVal'] = 'Cancel';
            // [more..]
        })($.dialog.setting);

        function demo1() {
            $.dialog({title: '我是新标题', content: '我支持HTML', lock: true});
        }
        function demo2() {
            $.dialog({
                content: '如果定义了回调函数才会出现相应的按钮',
                ok: function () {
                    this.title('3秒后自动关闭').time(3);
                    return false;
                },
                cancelVal: '关闭',
                cancel: true
            });
        }
        function demo3() {
            $.dialog({
                id: 'testID',
                content: 'hello world!',
                button: [
                    {
                        name: '定义按钮',
                        callback: function () {
                            alert('你不同意') //回调
                        }
                    },
                    {
                        name: '关闭我'
                    }
                ]
            });
        }
        function demo4() {
            $.dialog({
                content: 'url:xxx.html',
                width: '700px',
                height: 500
            })

        }
        function demo5() {
            $.dialog.tips('数据加载中...', 3);
        }
    </script>
    <script type="text/javascript" src="statics/js/monkey.js"></script>
</head>

<body>
<!--page_header-->
<div class="page_header">
    <h3>弹出层演示</h3>

    <p>包含常用弹出框的演示说明 使用 <code><a href="http://code.google.com/p/lhgdialog/" target="_blank">Lhgdialog</a></code> JQuery组件
    </p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

    <h4>普通消息框 带锁屏</h4>

	<pre class="prettyprint linenums">
$.dialog({title:'我是新标题',content: '我支持HTML',lock: true});</pre>

    <p>
        <button class="u_button u_button_gray" onClick="demo1()">运行</button>
    </p>

    <h4>对话框</h4>

	<pre class="prettyprint linenums">
$.dialog({
    content: '如果定义了回调函数才会出现相应的按钮',
    ok: function(){
    	this.title('3秒后自动关闭').time(3); //这里是回调
        return false;
    },
    cancelVal: '关闭',
    cancel: true /*为true等价于function(){}*/
});</pre>

    <p>
        <button class="u_button u_button_gray" onClick="demo2()">运行</button>
    </p>

    <h4>自定义按钮</h4>

	<pre class="prettyprint linenums">
$.dialog({
    id: 'testID',
    content: 'hello world!',
    button: [
        {
            name: '定义按钮',
            callback: function(){
                alert('你不同意') //回调
            }
        },
        {
            name: '关闭我'
        }
    ]
});</pre>

    <p>
        <button class="u_button u_button_gray" onClick="demo3()">运行</button>
    </p>

    <h4>打开其他页面 可定制大小</h4>

	<pre class="prettyprint linenums">
$.dialog({
content: 'url:xxx.html',
width: '700px',
height: 500
})
//注意：目标页面里面要重新调用js等</pre>

    <p>
        <button class="u_button u_button_gray" onClick="demo4()">运行</button>
    </p>

    <h4>TIP提示</h4>

	<pre class="prettyprint linenums">
$.dialog.tips('数据加载中...',3);
//可以覆盖运行</pre>

    <p>
        <button class="u_button u_button_gray" onClick="demo5()">运行</button>
    </p>

</div>
<!--/page_main-->
</body>
</html>